본문으로 건너뛰기

useState

🧑🏻‍💻 useState​

useState 는 컴포넌트에 state 변수를 추가할 수 있게 해주는 React 훅이다. state를 변경해 주면 리렌더링이 비동기적으로 일어난다.

✅ useState 문법​

const [state, setState] = useState(initialState);

  • React는 initialState를 한 번 저장하고 다음 렌더링부터는 이를 무시한다. initialState 가 함수인 경우 컴포넌트를 처음 렌더링할 때만 초기화 함수를 호출하고, 그 반환 값을 초기 state로 저장한다.

  • useState가 반환하는 set 함수를 사용하면 state를 다른 값으로 업데이트하고 리렌더링을 촉발할 수 있다.

🧑🏻‍💻 알고 가기​

✅ useState 호출 시 주의할 점​

  • useState는 훅이므로 컴포넌트의 최상위 레벨이나 직접 만든 훅에서만 호출해야 한다, 반복문이나 조건문 안에서는 호출할 수 없다.

    모든 Hook은 컴포넌트가 매번 렌더링 될 때 같은 동작을 한다. 이렇게 함으로써 useState나 useEffect가 많이 사용되어도 정확하게 상태를 보존할 수 있다. 즉 반복문이나 조건문에서 사용되면 렌더링 때 다른 동작을 할 위험이 있기 때문에 최상위 레벨에서 반복문이나 조건문 안에서 호출하면 안 된다.

✅ 객체 및 배열 '교체'하기​

  • React에서 state는 읽기 전용으로 간주하므로 기존 객체 및 배열을 변이하지 않고, 교체해야 한다.

✅ state 변경 값 바로 반영 시, 업데이터 함수 사용하기​

// 업데이터 함수
function handleClick() {
    setAge(a => a + 1); // setAge(42 => 43)
    setAge(a => a + 1); // setAge(43 => 44)
    setAge(a => a + 1); // setAge(44 => 45)
}

  • 리렌더링 전 변환 값을 바로 반영하고 싶다면 업데이트 함수를 사용해야 한다.

  • 업데이터 함수는 대기 중인 state를 가져와 다음 state를 계산한다.